<template>
  <div class="common">
    <div class="action">
      <el-button type="primary" @click="back">返回</el-button>
    </div>
    <div class="info">
      <div style="display: flex">
        <el-form-item label="模板名称：" label-width="95px" style="margin-right: 30px">
          <el-input v-model="formData.unitTemplateName"></el-input>
        </el-form-item>
        <el-form-item label="单位类型：" label-width="275px">
          <el-input v-model="formData.unitType"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form disabled="true">
          <div class="rowData">
            <el-form-item label="单位编号：" class="inputStyle" label-width="95px">
              <el-input v-model="formData.unitNumber"></el-input>
            </el-form-item>
            <el-form-item label="单位名称：" class="inputStyle" label-width="140px">
              <el-input v-model="formData.unitName"></el-input>
            </el-form-item>
            <el-form-item label="驻场房间编号：" class="inputStyle" label-width="140px">
              <el-input v-model="formData.roomNumber"></el-input>
            </el-form-item>
          </div>
          <div class="rowData">
            <el-form-item label="负责人：" class="inputStyle" label-width="95px">
              <el-input v-model="formData.headName"></el-input>
            </el-form-item>
            <el-form-item label="负责人电话：" class="inputStyle" label-width="140px">
              <el-input v-model="formData.headPhone"></el-input>
            </el-form-item>
            <div class="inputStyle">
              <el-form-item label="是否考核：" class="inputStyle" label-width="140px">
                <el-input v-model="formData.isAssess"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <div>
        <div style="background-color: #fff;padding: 20px 10px;">
          <v-form-render :form-json="vFormJson" :form-data="vFormData" :option-data="vOptionData"  ref="vFormRef">
          </v-form-render>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {computed, ref, reactive, onBeforeMount, nextTick, onBeforeUpdate, onMounted} from "vue";
const formData = ref({
  unitTemplateName: '',
  unitType: '',
  id: '',
  catalogueId: '',
  unitNumber: '',
  unitName: '',
  roomNumber: '',
  headName: '',
  headPhone: '',
  isAssess: '',
})
const vFormJson = reactive({})
const vFormData = reactive({})
const vOptionData = reactive({})
const vFormRef = ref(null)
const emit = defineEmits(["getValue"]);
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  }
})

/**
 * 返回，回到index
 */
const back = () => {
  emit("getValue",'index')
};

onMounted(() => {
  if (props.data) {
    console.log(props.data);
    
    formData.value.unitType = props.data.unitType
    formData.value.unitTemplateName = props.data.unitTemplateName
    formData.value.catalogueId = props.data.catalogueId
    formData.value.id = props.data.modelId
    formData.value.unitNumber = props.data.unitNumber
    formData.value.unitName = props.data.unitName
    formData.value.roomNumber = props.data.roomNumber
    formData.value.headName = props.data.headName
    formData.value.headPhone = props.data.headPhone
    formData.value.isAssess = props.data.examine === 1 ? '是' : '否';
    // vFormRef.value.setFormJson(JSON.parse(props.data.formJson))
    // console.log('props.data.formJson')
    // console.log(JSON.parse(props.data.formJson).formConfig.labelPosition)
    // let data = JSON.parse(props.data.dataJson);
    // vFormJson.formConfig.labelPosition = 'right'
    // vFormJson.widgetList.forEach(element => {
    //   let tempDefaultValue = data[element.id];
    //   console.log('tempDefaultValue')
    //   console.log(tempDefaultValue)
    //   element.options.label += '：'
    //   if(element.type == 'input') {
    //     element.options.readonly = true
    //     element.options.defaultValue = tempDefaultValue
    //   }else if(element.type == 'textarea') {
    //     element.type = 'input'
    //     element.options.readonly = true
    //     element.options.defaultValue = tempDefaultValue
    //   }else if(element.type == 'number') {
    //     element.type = 'input'
    //     element.options.readonly = true
    //     element.options.defaultValue = tempDefaultValue
    //   }else if(element.type == 'select') {
    //     element.type = 'input'
    //     element.options.readonly = true
    //     element.options.optionItems.forEach(e => {
    //       if(e.value == tempDefaultValue) {
    //         element.options.defaultValue = e.label
    //       }
    //     })
    //   }else if(element.type == 'time-range') {
    //     element.type = 'input'
    //     element.options.disabled = true
    //     element.options.defaultValue = tempDefaultValue[0] +' - '+ tempDefaultValue[1]
    //   }else if(element.type == 'date-range') {
    //     element.type = 'input'
    //     element.options.disabled = true
    //     element.options.defaultValue = tempDefaultValue[0] +' - '+ tempDefaultValue[1]
    //   }else if(element.type == 'radio') {
    //     element.options.disabled = true
    //   }else if(element.type == 'rate') {
    //     element.options.disabled = true
    //   }else if(element.type == 'html-text') {
    //     element.options.disabled = true
    //   }else if(element.type == 'static-text') {
    //     element.options.disabled = true
    //   }else if(element.type == 'button' || element.type == 'button') {
    //     element.options.readonly = true
    //   }else {
    //     element.type = 'input'
    //     element.options.readonly = true
    //   }

    //   // element.options.disabled = true
    // });
    // vFormRef.value.setFormJson(vFormJson)
    // console.log('vFormJson.formConfig.labelPosition')
    // console.log(vFormJson.formConfig.labelPosition)
  }
})
</script>

<style scoped>
  .common{
    padding: 40px 100px;
    height: 83%;
    margin: 10px;
    background-color: #FFFFFF;
  }
  .action{
    float: right;
    position: relative;
  }
  .line{
    border-top: 1px solid #1caad5;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  .info{

  }
  .rowData{
    display: flex;
    margin-top: 20px;
  }
  .selectStyle{
    width: 300px;
  }
  .inputStyle{
    width: 450px;
  }
  .fileUpload{
    width: 100px;
    height: 30px;
    border: 1px solid var(--el-border-color);
    border-radius: 5px;
    color: #5a5756;
    text-align: center;
  }
  /deep/ .el-input.is-disabled .el-input__wrapper {
    background-color: white;
    box-shadow: 0 0 0 0;
  }
  /deep/ .el-input.is-disabled .el-textarea__inner {
    background-color: white;
    box-shadow: 0 0 0 0;
  }
  /deep/ .el-input__wrapper {
    background-color: white;
    box-shadow: 0 0 0 0;
  }
  /deep/ .el-form-item--default .el-form-item__label {
    justify-content: flex-end !important;
    width: 85px !important;
  }
</style>
